<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echartsJs/echarts.js"></script>
    <script src="theme/dark.js"></script>
    <!-- <script src="theme/infographic.js"></script> -->
    <script>
        /*   1.获取Echarts
              npm install echarts 

             2.引入Echarts 
              和普通插件类似，可以使用script标签完成引入即可，<script src="echartsJs/echarts.js">
                
             3.定义图形的展示容器
                理论上可以使用HTML中任何标签作为容器进行定义，但建议一定提供宽高样式
                echarts在自行构建所需要的canvas或者svg标签，并添加到容器中
                echarts在创建图形绘制容器时，会从容器元素上加载宽度和高度值

            4.完成Echarts的初始化操作
                完成一个基于Echarts的图形和页面DOM元素的关联
                同时也可完成主题设置和环境设置
                Echarts的初始必须在页面完成后执行

            5.通过echarts.init()初始化方法返回的图形初始化对象，完成配置项设置，实现图形选择，图形渲染等
                通过返回的echarts的初始化对象调用setOption(options)方法，完成图形选择等操作
                options是为参数，参数为对象格式，通过对象中定义对应属性完成功能的调用
             
          */

    </script>
</head>

<body>
    <div id="main" style="width:600px;height:400px;"></div>
    <script>

        
        // 基于准备好的dom，初始化echarts实例
        // echarts.init(dom,[,theme[,opts]]);
        // dom:指定当前初始化echarts图形的对应的页面的元素
        // theme：图形主题设置(配合官网在线的主题编辑工具完成)
        // opts:配置echarts图形在构建的时候一些环境信息(渲染模式...)
        var chartDom=document.getElementById('main');
        var myChart = echarts.init(chartDom,"dark",{
            renderer:"canvas"
        });
        // 绘制图表
        myChart.setOption({
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        });
    </script>
</body>

</html>